<template>
    <div class="menu">
        <a-form
                layout="inline"
                :form="searchForm">
            <a-form-item label="所属系统">
                <sys-select v-decorator="['sysCode']" @change="getData"></sys-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">
                    新增顶级
                </a-button>
            </a-form-item>
        </a-form>
        <a-table :columns="columns" :dataSource="treeData">
            <template v-for="col in ['menuCode','menuName','iconCls','routerPath']" :slot="col" slot-scope="text, record, index">
                <div :key="col">
                    <a-input
                            v-if="record.editable"
                            style="margin: -5px 0"
                            :value="text"
                            @change="e => handleChange(e.target.value, record.key, col)"
                    />
                    <template v-else>{{text}}</template>
                </div>
            </template>
            <template slot="state" slot-scope="text">

            </template>
            <template slot="operation" slot-scope="text, record, index">
                <!--<div class='editable-row-operations'>-->
                    <!--<span v-if="record.editable">-->
                      <!--<a @click="() => save(record.key)">保存</a>-->
                      <!--<a-popconfirm title='确认取消?' @confirm="() => cancel(record.key)">-->
                        <!--<a>取消</a>-->
                      <!--</a-popconfirm>-->
                    <!--</span>-->
                    <!--<span v-else>-->
                      <!--<a @click="() => edit(record.key)">编辑</a>-->
                      <!--<a-popconfirm-->
                              <!--v-if="data.length"-->
                              <!--title="确定删除?"-->
                              <!--@confirm="() => onDelete(record.key)">-->
                        <!--<a href="javascript:;">删除</a>-->
                    <!--</a-popconfirm>-->
                  <!--</span>-->
                <!--</div>-->
            </template>
        </a-table>

    </div>
</template>

<script>
  import SysSelect from '../../components/sys/SysSelect'

  const columns = [
    {title: '', width:'5%'},
    { title: '菜单编码', dataIndex: 'menuCode', scopedSlots: { customRender: 'menuCode' } },
    { title: '菜单名称', dataIndex: 'menuName', scopedSlots: { customRender: 'menuName' } },
    { title: '菜单链接', dataIndex: 'menuUrl',scopedSlots: { customRender: 'menuUrl' } },
    { title: 'icon', dataIndex: 'iconCls', scopedSlots: { customRender: 'iconCls' } },
    { title: '路由地址', dataIndex: 'routerPath', scopedSlots: { customRender: 'routerPath' } },
    { title: '资源id', dataIndex: 'resourceId', scopedSlots: { customRender: 'resourceId' } },
    { title: '状态', dataIndex: 'isValid', scopedSlots: { customRender: 'isValid' } },
    { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' },},
  ]
  export default {
    components: {SysSelect},
    data () {
      return {
        searchForm: this.$form.createForm(this),
        treeData:[],
        columns,
        sysCode:'',
        menuId:'',
        cacheData:{}
      }
    },
    methods: {
      getData (val) {
        let self = this
        self.sysCode = val
        self.$axios
          .post('commonRest/menuAllTreeWithRole', {
            sysCode: self.sysCode
          })
          .then(res => {
              if(res.data.length>0) {
                self.treeData = res.data.map( item =>({
                  ...item,
                  key:item.menuId
                }))
                for(let i in self.treeData) {
                  if (self.treeData[i].children.length>0) {
                    self.treeData[i].children = self.treeData[i].children.map( child =>({
                      ...child,
                      key:child.menuId
                    }))
                    for(let j in self.treeData[i].children){
                      if (self.treeData[i].children[j].children.length<=0) {
                        delete self.treeData[i].children[j].children
                      }
                    }
                  } else {
                    delete self.treeData[i].children
                  }
                }
                self.cacheData = res.data.map((item,index) => ({ ...item,key:item.menuId }))
                for(let a in self.cacheData) {
                  if (self.cacheData[a].children.length>0) {
                    self.cacheData[a].children = self.cacheData[a].children.map( child =>({
                      ...child,
                      key:child.menuId
                    }))
                    for(let b in self.cacheData[a].children){
                      if (self.cacheData[a].children[b].children.length<=0) {
                        delete self.cacheData[a].children[b].children
                      }
                    }
                  } else {
                    delete self.cacheData[a].children
                  }
                }
              } else {
                self.treeData = []
              }
          })
      },
      // // 编辑
      // edit (key) {
      //   this.menuId = key
      //   const newData = [...this.treeData]
      //   const target = newData.filter(item => key === item.key)[0]
      //   if (target) {
      //     target.editable = true
      //     this.treeData = newData
      //   }
      // },
      // // 列表修改
      // handleChange (value, key, column) {
      //   const newData = [...this.treeData]
      //   const target = newData.filter(item => key === item.key)[0]
      //   if (target) {
      //     target[column] = value
      //     this.treeData = newData
      //   }
      // },
      // // 保存编辑
      // save (key) {
      //   const newData = [...this.treeData]
      //   const target = newData.filter(item => key === item.key)[0]
      //   target.menuId = this.menuId
      //   if (target) {
      //     delete target.editable
      //     this.$axios.post('roleAction/saveForm',target).then(res => {
      //       if (res.data.result) {
      //         if (!key) {
      //           newData[this.treeData.length-1].key = this.menuId.substring(3)
      //           newData[this.treeData.length-1].menuId = this.menuId.substring(3)
      //         }
      //         this.treeData = newData
      //         this.cacheData = newData.map(item => ({ ...item }))
      //       } else {
      //         this.$message.error(res.data.msg);
      //       }
      //     })
      //   }
      // },
      // // 取消编辑
      // cancel (key) {
      //   const newData = [...this.treeData]
      //   const target = newData.filter(item => key === item.key)[0]
      //   if (target) {
      //     if (!key) {
      //       this.treeData = newData.splice(0,newData.length-1)
      //     } else {
      //       Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
      //       delete target.editable
      //       this.treeData = newData
      //     }
      //   }
      // },
      // // 删除列表
      // onDelete (key) {
      //   let self = this
      //   self.$axios.post('roleAction/deleteRole',{
      //     id:key
      //   }).then(res => {
      //     if (res.data.result) {
      //       const newData = [...self.treeData]
      //       self.treeData = newData.filter(item => item.key !== key)
      //     } else {
      //       self.$message.error(res.data.msg);
      //     }
      //   })
      // },
    }
  }
</script>

<style lang="scss">
    .menu{
        .editable-row-operations a{
            margin-right:10px;
        }
    }
</style>